<template>
    <el-scrollbar>
        <div class="tags-bar">
            <el-tag size="large" v-for="(item, index) in tags" :key="index" :closable="item.path !== '/home'"
                :disable-transitions="false" :effect="item.path === route.path ? 'dark' : 'plain'"
                @click="goto(item.path)" @close="delTag(index)">
                <i class="cir" v-show="item.path === route.path"></i>
                {{ item.title }}
            </el-tag>
        </div>
    </el-scrollbar>
</template>

<script setup>
import { watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSysConfigStore } from '@/stores/sysConfig'
import { storeToRefs } from "pinia";

const route = useRoute();
const router = useRouter();

const sysConfig = useSysConfigStore()
const { tags } = storeToRefs(sysConfig)

//选中页签跳转
function goto(path) {
    router.push(path);
}

//删除页签
function delTag(index) {
    const delTagPath = tags.value[index].path
    tags.value.splice(index, 1);
    if (delTagPath === route.path) {
        router.push(tags.value[tags.value.length - 1].path);
    }
}

watch(
    route,
    (val) => {
        const flag = tags.value.find((item) => {
            return val.path == item.path;
        });
        if (!flag) {
            tags.value.push({
                title: val.meta.title,
                path: val.path,
            });
        }
    },
    { immediate: true }
);
</script>

<style scoped lang="less">
.tags-bar {
    line-height: 34px;
    display: flex;

    .el-tag {
        margin-left: 5px;
        cursor: pointer;
        font-weight: bold;

        .cir {
            width: 8px;
            height: 8px;
            margin-right: 4px;
            background-color: #fff;
            border-radius: 50%;
            display: inline-block;
        }
    }
}
</style>
